//@flow

/**
 * 输入框
 */

import React, { Component } from 'react';
import { 
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    StyleSheet,
 } from 'react-native';
import Icon from "react-native-vector-icons/AntDesign";
import { ERROR_COLOR } from '../../util/constant/ui';

/**输入框合法性校验 */
type InputCheck = (value:string)=>{};
type Props = {
    key         :string,
    value?      :string,
    inputType   :string,//输入框内容显示与否，password表示隐藏，其他表示显示
    check       :InputCheck,//校验方法
    iconName    :string,//左边图标的名字
    rightItem   :React.Component,
    placeholder :string,//输入框的占位符
    display     :boolean,//是否显示
}
type State = {
    display	    :boolean,
    value       :string,
}
/**基本tintColor色调 */
const BASE_COLOR = 'white'
export class LoginInput extends Component <Props,State>{
    /**初始化props  */
    static defaultProps:Props = {
        key:'',
        value:'',
        inputType:'default',
        check:(value)=>{
            console.log(`合法性校验函数：${value}`)
            return true
        },
        iconName:'user',
        rightItem:null,
        display:true,
        placeholder:'手机号/邮箱/用户名',
    }
    /**初始化state */
    state:State = {
        value:this.props.value || '',
        display:this.props.display,
    }
    /**修改文本框的类型 */
    changeSafety(isShow:boolean){
        
        this.setState({display:isShow})
    }
    /**获取文本框输入内容 */
    getValue():string{
        return this.state.value;
    }
    render(){
        const data:Props = this.props;
        // console.log(`接受到显示:${this.state.display}==类型：${typeof(this.state.display)}`)
        return (
            <View style={[styles.commonInput,styles[data.isError?'errorInput':'normalInput']]}>
                <Icon name={data.iconName} size={20} color={BASE_COLOR}/>
                <TextInput value={this.state.value} 
                           onChange={(v)=>{
                               this.setState({value:v.nativeEvent.text})
                           }}
                           secureTextEntry={!this.state.display}
                           keyboardType={this.props.inputType}
                           placeholder={data.placeholder}
                           placeholderTextColor={BASE_COLOR}
                           selectionColor={BASE_COLOR}
                           style={styles.inputText}/>
                {data.rightItem}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    commonInput:{
        borderWidth:1,
        backgroundColor: 'rgba(255,255,255,0.4)',
        height:40,
        borderRadius: 20,
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        // marginHorizontal: 40,
        marginBottom: 8,
    },
    inputText:{
        color:BASE_COLOR,
        flex:1,
        height:25,
        fontSize:15,
        paddingLeft: 5,
    },
    normalInput:{
        borderColor: 'rgba(255,255,255,0.4)',
    },
    errorInput:{
        borderColor:ERROR_COLOR,
    }
})